<!-- src/components/TaskBoard.vue -->
<script setup>
import { useTaskStore } from '@/stores/taskStore'
import { useUserStore } from '@/stores/userStore'
import TaskCard from './TaskCard.vue'

const store = useTaskStore()
const userStore = useUserStore()

const handleDragStart = (task) => {
  event.dataTransfer.setData('taskId', task.id)
}

const handleDrop = (status) => {
  const taskId = Number(event.dataTransfer.getData('taskId'))
  store.updateTaskStatus(taskId, status)
}

const assignToMe = (taskId) => {
  const task = store.tasks.find(t => t.id === taskId)
  if (task && userStore.currentUser) {
    const member = store.members.find(m => m.name === userStore.currentUser)
    if (member && member.currentLoad < member.capacity) {
      task.assignedTo = member.id
      member.currentLoad += 1
    } else if (member) {
      alert('您当前的工作量已满，无法分配更多任务')
    }
  } else if (!userStore.currentUser) {
    alert('请先登录')
  }
}
</script>

<template>
  <div class="task-board-container">
    <div 
      v-for="(tasks, status) in store.tasksByStatus" 
      :key="status"
      class="task-column"
      @drop="handleDrop(status)"
      @dragover.prevent
      @dragenter.prevent
    >
      <div class="column-header">
        <h3>{{ 
          status === 'todo' ? '待办' : 
          status === 'doing' ? '进行中' : '已完成' 
        }}</h3>
        <span class="badge">{{ tasks.length }}</span>
      </div>
      <div class="tasks-container">
        <TaskCard
          v-for="task in tasks"
          :key="task.id"
          :task="task"
          @assign-to-me="assignToMe"
          draggable
          @dragstart="handleDragStart(task)"
        />
        <div v-if="tasks.length === 0" class="empty-state">
          <p>暂无任务</p>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- 样式保持不变 -->